<template>
  <div class="page">
		<keep-alive>
		  <router-view></router-view>
		</keep-alive>
		<div class="tabbar">
			<van-tabbar 
				:fixed="true" 
				:placeholder="true" 
				v-model="active"
				:route="true"
				:safe-area-inset-bottom="true"
			>
				<van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
				<van-tabbar-item replace to="/order" icon="orders-o">订单</van-tabbar-item>
				<van-tabbar-item replace to="/mine" icon="manager-o">我的</van-tabbar-item>
			</van-tabbar>			
		</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
			active: 0,
    }
  },
  computed: {

  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
	@import '~styles/theme';
	.page{
		// background-color: $body_bg_color;
	}
	/deep/ .van-tabbar-item{
		.van-tabbar-item__text{
			font-size: 12px;
		}
	}
	/deep/ .van-tabbar-item--active{
		.van-icon{
			color: $theme_color;
		}
		.van-tabbar-item__text{
			@extend .van-icon;
		}
	}
</style>
